<template>
    <div class="sidebar">
      <div 
        class="sidebar-item" 
        v-for="item in sidebarItems" 
        :key="item.action"
        @click="handleClick(item.action)"
      >
        <el-icon><component :is="item.icon" /></el-icon>
        <span>{{ item.label }}</span>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineEmits } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessageBox } from 'element-plus'
  const router = useRouter()
  import {
    Plus,
    ChatLineRound,
    Iphone,
    Document,
    DataBoard ,
    ShoppingCart
  } from "@element-plus/icons-vue"
  import { onMounted } from 'vue'
onMounted(() => {
  console.log('接收到的 userId:', props.userId)
})
  const props = defineProps({
  userId: {
    type: [Number, String, null], // 允许更多类型
    default: 0
  }
})
  const emit = defineEmits(['item-click'])
  
  // 侧边栏配置项
  const sidebarItems = [
    { action: 'post', label: '发闲置', icon: Plus },
    { action: 'forum', label: '论坛', icon: ChatLineRound },
    { action: 'app', label: '竞拍', icon: DataBoard  },
    { action: 'feedback', label: '购物车', icon: ShoppingCart }
  ]
  
  const handleClick = (action) => {
    console.log('点击了侧边栏', action)
    if(action === 'post'){
        const routeData = router.resolve({
            path:'/postidle'
        })
        window.open(routeData.href, '_blank')
    }
    else if(action ==='feedback'){
        const routeData = router.resolve({
            path:'/cart'
        })
        window.open(routeData.href, '_blank')
  }
  else if(action ==='forum'){
    const routeData = router.resolve({
        path:'/forums',
        query: {
            userId: props.userId
        }
    })
    window.open(routeData.href, '_blank')
  }
  else if(action ==='app'){
    // ElMessageBox.alert('暂未开放，敬请期待！', '提示', {
    //   confirmButtonText: '确定',    // 确定按钮文字

    // })
    const routeData = router.resolve({
      path:'/auction',
      query:{
        userId: props.userId
      }
    })
    window.open(routeData.href, '_blank')
  }
}
  </script>
  
  <style scoped>
.sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px 10px;
  background-color: rgba(255, 255, 255, 0.2); 
  border-radius: 15px 0 0 15px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background-color: rgba(241, 196, 15, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 70px;
  text-align: center;
}

.sidebar-item:hover {
  background-color: rgba(224, 185, 26, 0.6);
  transform: translateX(-5px);
}

.sidebar-item .el-icon {
  font-size: 32px;  /* 放大后的图标尺寸 */
  margin-bottom: 5px;  /* 调整后的间距 */
}

.sidebar-item span {
  font-size: 14px;  /* 放大后的文字尺寸 */
  line-height: 1.1;  /* 调整后的行高 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}




</style>